<template>
	<view class="fixed_bg">
		<view class="picture_box">
			<image class="page_bg" mode="aspectFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/2800670c-74d9-4f7d-91a5-7072156d111f.jpg"></image>
		</view>
		<view class="photoFrame">
			<view class="photoFrame_bg">
				<view class="photoFrame_frame" :style="{height:height}">
					<image class="frame_box"  mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/c87fb413-16c9-4224-8568-c49e0d959748.webp"></image>
					<image v-if="hasDoor" class="frame_left" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/e58528ef-36a3-4947-9c59-77aa2cb36dec.webp"></image>
					<image v-if="hasDoor" class="frame_right" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/b0a32b7a-432c-46ff-a524-0208154cf382.webp"></image>
					<!-- 插槽 -->
					<slot></slot>
				</view>
				<image class="envelope_img" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/ff29f1f8-3fe1-4290-ba27-5ee05ed883db.webp"></image>
				<image class="unseal_img" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/c17f8a89-51ef-4447-9d8c-225548665f16.webp"></image>
				<image class="unseal_img2" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/c17f8a89-51ef-4447-9d8c-225548665f16.webp"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps } from 'vue'
	const props = defineProps({
		height: {
			type: String
		},
		hasDoor: {
			type: Boolean,
			default: true
		}
	})
</script>

<style lang="scss" scoped>
	.picture_box {
		height: 100vh;
		width: 100vw;
		position: relative;
		.page_bg {
			width: 100vw;
			height: 100vh;
			animation: bigToSmall 1s ease-out;
			animation-fill-mode:forwards;
			@keyframes bigToSmall {
				0% {
					transform: scale(1.2);
				}
				100% {
					transform: scale(1);
				}
			}
		}
	}
	.photoFrame {
		position: fixed;
		width: 80vw;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: #eee;
		animation: routeFrame 2s linear;
		@keyframes routeFrame {
			0% {
				transform: translate(-50%,-50%) scale(1.1);
				opacity: 0;
			}
			100% {
				transform: translate(-50%,-50%) scale(1);
				opacity: 1;
			}
		}
		.photoFrame_bg {
			position: relative;
			height: 100%;
			width: 100%;
			padding: 10rpx;
			box-sizing: border-box;
			.photoFrame_frame {
				position: relative;
				.frame_box {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					animation: frameBoxAnimate 2s linear;
					@keyframes frameBoxAnimate {
						0% {
							transform: scale(2);
						}
						100% {
							transform: scale(1);
						}
					}
				}
				.frame_left {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 60rpx;
					height: 312rpx;
					animation: frameLeftAnimate 2s linear;
					@keyframes frameLeftAnimate {
						0% {
							transform: translateX(400rpx) translateY(-50%);
						}
						100% {
							transform: translateX(0) translateY(-50%);
						}
					}
				}
				.frame_right {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 60rpx;
					height: 312rpx;
					animation: frameRightAnimate 2s linear;
					@keyframes frameRightAnimate {
						0% {
							transform: translateX(-400rpx) translateY(-50%);
						}
						100% {
							transform: translateX(0) translateY(-50%);
						}
					}
				}
			}
			.envelope_img {
				position: absolute;
				left: 0;
				bottom: -10rpx;
				width: calc(100% + 26rpx);
				margin-left: -13rpx;
				animation: innerForBottom 2s linear;
				@keyframes innerForBottom {
					0% {
						opacity: .5;
						transform: translateY(600rpx);
					}
					100% {
						opacity: 1;
						transform: translateY(0rpx);
					}
				}
			}
			.unseal_img {
				position: absolute;
				bottom: 40rpx;
				width: 120rpx;
				left: 50%;
				margin-left: -60rpx;
				animation: unsealMove 2s linear;
				animation-fill-mode: forwards;
				@keyframes unsealMove {
					0% {
						transform: scale(.5);
					}
					99% {
						opacity: 1;
					}
					100% {
						opacity: 0;
						transform: scale(1);
					}
				}
			}
			.unseal_img2 {
				position: absolute;
				bottom: 40rpx;
				width: 120rpx;
				left: 50%;
				margin-left: -60rpx;
				opacity: 0;
				animation: unsealAni 5s linear infinite;
				animation-fill-mode: forwards;
				animation-delay: 1.9s;
				@keyframes unsealAni {
					0% {
						opacity: 1;
						transform: rotateZ(0);
					}
					100% {
						opacity: 1;
						transform: rotateZ(360deg);
					}
				}
			}
		}
	}
</style>